<template>
  <h2>
  所请假人员
  </h2>
  <div class="main">
      <el-table :data="store.state.month.listleave" border style="width: 100%">
        <el-table-column label="学号" prop="id" width="100" align="center" />
        <el-table-column label="姓名" prop="name" align="center" />
        <el-table-column label="性别" prop="sex" align="center" />
        <el-table-column label="年龄" prop="age" align="center" />
        <el-table-column label="学院" prop="college" align="center" />
        <el-table-column label="原因" prop="cause" align="center" />
        <el-table-column label="请假" prop="leave" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >批准</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script setup lang="ts">
import {useStore} from 'vuex'
import { ElMessage } from 'element-plus'
    let store=useStore();
    store.dispatch("getLeave")
    interface User {
      id: string;
      college: string;
      sex: string;
      age: string;
      score: Number;
      name: string;
      hege?:string;
    }
  const handleDelete = (index: number, row: User) => {
    ElMessage.error('成功删除')
    setTimeout(()=>{
      store.state.month.listleave.splice(index,1)
    })
  };
  const handleEdit=(index:number ,row:User)=>{
    console.log(index,row)
    ElMessage({
      message: '已批准',
      type: 'success',
    })
    setTimeout(()=>{
      store.state.month.listleave.splice(index,1)

    },2000)
  }
</script>

<style scoped>

</style>